<template>
	<div>
		<div style="width: 111.1%; text-align: right;">
			<el-input style="width: 19rem;margin: 0 0.5rem 0.5rem 0;" clearable suffix-icon="el-icon-search" v-model="queryParams.content" placeholder="请输入内容"></el-input>
			<el-button class="bgc2f6 cfff" @click="seach">搜索</el-button>
			<el-button type="success" @click="addtj" v-if="showRules">新增</el-button>
		</div>
		<div class="w100 p1 h65 bgcfff bsbb" style="border: #e6e6e6 1px solid; border-radius: 8px;">
			<div style="height: 60rem;overflow-y:auto;display: flex;flex-wrap: wrap;" v-loading="loading" element-loading-text="拼命加载中">
				<!-- <div class="fileDetail" v-for="(item, index) in resourceCenterList" :key="index">
					<div class="map" @click="details(item)">
						<span class="mapSpan">{{ item.name || noData }}</span>
						<div class="maps"><span>了解详情</span></div>
					</div>
					<img v-if="item.photo == null" style="width: 100%;height: 50%;" :src="defaultImg" alt="" />
					<img v-else style="width: 100%;height: 50%;" :src="url + item.photo" alt="" />
					<div style="text-align: center; margin-top: 0.5rem;font-size: 0.9rem;">{{ item.file_type || noData }}</div>
					<el-tooltip class="item" effect="dark" :content="item.name || noData" placement="top-start">
						<div style="text-align: center;margin: 1rem 0;width:100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ item.name || noData }}</div>
					</el-tooltip>
				</div> -->
				<el-table :data="tableData" height="100%" style="width: 100%;">
					<el-table-column width="80" label="智能地图" align="center">
						<template slot-scope="scope">
							<div class="star">
								<div
									:class="scope.row.collection == 1 ? 'iconfont icon-star' : 'iconfont icon-star star-active'"
									@click="selStar(scope.row.id, scope.row.collection)"
								></div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="名称" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="Service_type" label="类型" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="Coordinate_system" label="坐标系" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="Service_address" label="地址" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="Service_date" label="服务日期" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column fixed="right" label="操作" align="center" width="100">
						<template slot-scope="scope">
							<el-button type="text" size="small" icon="el-icon-view" @click="details(scope.row.id)">查看详情</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="tar mt05">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:page-sizes="[16, 30, 45, 60]"
					:page-size="queryParams.pageSize"
					background
					layout="total, sizes, prev, pager, next, jumper"
					:total="count"
				></el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
import { iiiustratedBooks, tjSel } from '@/api/resourceCenter.js';
import defaultImg from '@/assets/defaultImg.png';
import { getItem } from '@/utils/storage.js';
import { userRule } from '@/api/user.js';
export default {
	name: 'mapsFile',
	data() {
		return {
			input: null,
			loading: false,
			tableData: [],
			count: null,
			showRules: false,
			defaultImg: defaultImg,
			queryParams: {
				pageSize: 16,
				page: 1,
				type: 1,
				content: null,
				token:getItem('token')
			}
		};
	},
	computed: {},
	created() {
		this.getResourceCenter();
		this.getUserRule(6);
	},
	methods: {
		getResourceCenter() {
			this.loading = true;
			iiiustratedBooks(this.queryParams).then(res => {
				this.loading = false;
				this.tableData = res.data.arr;
				this.count = res.data.count;
			});
		},
		details(val) {
			this.$router.push({
				path: '/dataFielDetail',
				query: {
					data: val,
					stype: 2
				}
			});
		},
		getUserRule(val) {
			//按钮权限
			userRule(val).then(res => {
				if (res.code == 1001) {
					this.showRules = true;
				}
			});
		},
		selStar(id, collection) {
			let sel = {
				id,
				collection: this.isStatus(collection),
				token: getItem('token')
			};
			tjSel(sel).then(() => {
				this.getResourceCenter();
			});
		},
		isStatus(val) {
			if (val == 0) {
				return 1;
			} else {
				return 0;
			}
		},
		addtj() {
			this.$router.push({
				path: '/addTj'
			});
		},
		handleSizeChange(val) {
			this.queryParams.pageSize = val;
			this.getResourceCenter();
		},
		handleCurrentChange(val) {
			this.queryParams.page = val;
			this.getResourceCenter();
		},
		seach() {
			this.getResourceCenter();
		}
	}
};
</script>

<style scoped lang="scss">
.fileDetail {
	width: 12rem;
	height: 14rem;
	margin: 0 0.56rem;
	background-color: #fafafa;
	border-radius: 0.4rem;
	position: relative;
	.map {
		width: 12rem;
		height: 7rem;
		position: absolute;
		background: rgba(61, 59, 59, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
		.mapSpan {
			text-align: center;
			margin-top: 2rem;
			-webkit-line-clamp: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			width: 9rem;
		}
		.maps {
			margin-top: 1rem;
			width: 5rem;
			height: 1.2rem;
			font-size: 0.5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 0.1rem solid #fff;
			border-radius: 1rem;
		}
	}
	.map:hover {
		width: 12rem;
		height: 7rem;
		cursor: pointer;
		position: absolute;
		background: rgba(61, 59, 59, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
		opacity: 0.7;
	}
}
.icon-star {
	text-align: right;
	margin-right: 1rem;
	color: #fee240;
	font-size: 30px;
}
.icon-star.star-active {
	text-align: right;
	margin-right: 1rem;
	color: #dddddd;
	font-size: 30px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
	background-color: #2f6bbb;
}
</style>
